﻿@{
    ViewBag.Title = "Solicitar Tarjeta TCT Copec";
}

<script src="@Url.Content("~/Scripts/jquery.Rut.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/AsyncUpload/swfupload.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/AsyncUpload/jquery-asyncUpload-0.1.js")" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $("#RUT").Rut({
            format_on: 'keyup',
            on_error: function () {
                alert('¡RUT Incorrecto!');
                $("#RUT").val("");
            }
        });
        $("#RUTEmp").Rut({
            format_on: 'keyup',
            on_error: function () {
                alert('¡RUT Incorrecto!');
                $("#RUTEmp").val("");
            } 
        });
        $("#Archivo").makeAsyncUploader({
            upload_url: "@Url.Content("~/Solicitudes/AJAX_SubirArchivo")",
            flash_url: "@Url.Content("~/Scripts/AsyncUpload/swfupload.swf")",
            button_image_url: "@Url.Content("~/Scripts/AsyncUpload/blankButton.png")",
            button_text: "Examinar...",
            file_size_limit: "4 MB",
            file_types: "*.*",
            file_types_description: "Archivo Cualquiera",
            upload_success_handler : function (file, data, response){
                $("input[name$=_filename]").val(file.name);
                $("input[name$=_guid]").val(response);
                var datos = data.split($("#Delimitador").val());
                if(datos[0] == "OK")
                {
                    $("span[id$=_completedMessage]").html("Archivo Subido: <b>{0}</b> ({1} KB)"
                                .replace("{0}", file.name)
                                .replace("{1}", Math.round(file.size / 1024)));
                    
                }
                else if(datos[0] == "LEN0")
                {
                    $("span[id$=_completedMessage]").html("El archivo no pudo subirse.");
                }
            }
        });
    });

    function Solicitar() {
        document.getElementById('ButtonClick').value = "Solicitar";
        if (document.getElementById('Nombre').value.length == 0) {
            document.getElementById('NombreVal').innerHTML = "<label style='color:Red'>*</label>";
        }
        else {
            document.getElementById('NombreVal').innerHTML = "";
        }
        if (document.getElementById('RUT').value.length == 0) {
            document.getElementById('RUTVal').innerHTML = "<label style='color:Red'>*</label>";
        }
        else {
            document.getElementById('RUTVal').innerHTML = "";
        }
        if (document.getElementById('RazonSocial').value.length == 0) {
            document.getElementById('RazonSocialVal').innerHTML = "<label style='color:Red'>*</label>";
        }
        else {
            document.getElementById('RazonSocialVal').innerHTML = "";
        }
        if (document.getElementById('RUTEmp').value.length == 0) {
            document.getElementById('RUTEmpVal').innerHTML = "<label style='color:Red'>*</label>";
        }
        else {
            document.getElementById('RUTEmpVal').innerHTML = "";
        }
        if (document.getElementById('Telefono').value.length == 0) {
            document.getElementById('TelefonoVal').innerHTML = "<label style='color:Red'>*</label>";
        }
        else {
            document.getElementById('TelefonoVal').innerHTML = "";
        }
        if (document.getElementById('Correo').value.length == 0) {
            document.getElementById('CorreoVal').innerHTML = "<label style='color:Red'>*</label>";
        }
        else {
            document.getElementById('CorreoVal').innerHTML = "";
        }
        if (document.getElementById('Patente').value.length == 0) {
            document.getElementById('PatenteVal').innerHTML = "<label style='color:Red'>*</label>";
        }
        else {
            document.getElementById('PatenteVal').innerHTML = "";
        }
        if (document.getElementById('TipoVehiculo').value.length == 0) {
            document.getElementById('TipoVehiculoVal').innerHTML = "<label style='color:Red'>*</label>";
        }
        else {
            document.getElementById('TipoVehiculoVal').innerHTML = "";
        }
        if (document.getElementById('Marca').value.length == 0) {
            document.getElementById('MarcaVal').innerHTML = "<label style='color:Red'>*</label>";
        }
        else {
            document.getElementById('MarcaVal').innerHTML = "";
        }
        if (document.getElementById('Modelo').value.length == 0) {
            document.getElementById('ModeloVal').innerHTML = "<label style='color:Red'>*</label>";
        }
        else {
            document.getElementById('ModeloVal').innerHTML = "";
        }
        if (document.getElementById('VolumenCargaDiaria').value.length == 0) {
            document.getElementById('VolumenCargaDiariaVal').innerHTML = "<label style='color:Red'>*</label>";
        }
        else {
            document.getElementById('VolumenCargaDiariaVal').innerHTML = "";
        }
        if (document.getElementById('VolumenCargaMensual').value.length == 0) {
            document.getElementById('VolumenCargaMensualVal').innerHTML = "<label style='color:Red'>*</label>";
        }
        else {
            document.getElementById('VolumenCargaMensualVal').innerHTML = "";
        }
        if (document.getElementById('CantidaddeCargasDiarias').value.length == 0) {
            document.getElementById('CantidaddeCargasDiariasVal').innerHTML = "<label style='color:Red'>*</label>";
        }
        else {
            document.getElementById('CantidaddeCargasDiariasVal').innerHTML = "";
        }
        if(document.getElementById('Nombre').value.length == 0 ||
           document.getElementById('RUT').value.length == 0 ||
           document.getElementById('RazonSocial').value.length == 0 ||
           document.getElementById('RUTEmp').value.length == 0 ||
           document.getElementById('Telefono').value.length == 0 ||
           document.getElementById('Correo').value.length == 0 ||
           document.getElementById('Patente').value.length == 0 ||
           document.getElementById('TipoVehiculo').value.length == 0 ||
           document.getElementById('Marca').value.length == 0 ||
           document.getElementById('Modelo').value.length == 0 ||
           document.getElementById('VolumenCargaDiaria').value.length == 0 ||
           document.getElementById('VolumenCargaMensual').value.length == 0 ||
           document.getElementById('CantidaddeCargasDiarias').value.length == 0){
                return false;
           }
        else{
            document.forms['Formulario'].submit();
        }
    }
    function Volver() {
        document.getElementById('ButtonClick').value = "Volver";
        document.forms['Formulario'].submit();
    }
</script>

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "Formulario" })) 
{
    @Html.ValidationSummary(true)
    <center>
        <h3>Solicitar Tarjeta TCT Copec</h3>
    </center>
    <fieldset>
    <legend>Solicitud</legend>
    <table align="center">
        <tr>
            <td>
                Fecha
            </td>
            <td>
                <input type="text" id="Fecha" name="Fecha" value="@DateTime.Now" readonly="readonly" />
            </td>
        </tr>
        <tr>
            <td>
                Nombre Solicitante
            </td>
            <td>
                <input type="text" id="Nombre" name="Nombre" />
            </td>
            <td>
                <div id="NombreVal"></div>
            </td>
        </tr>
        <tr>
            <td>
                RUT Solicitante
            </td>
            <td>
                <input type="text" id="RUT" name="RUT" />
            </td>
            <td>
                <div id="RUTVal"></div>
            </td>
        </tr>
        <tr>
            <td>
                Razón Social
            </td>
            <td>
                <input type="text" id="RazonSocial" name="RazonSocial" />
            </td>
            <td>
                <div id="RazonSocialVal"></div>
            </td>
        </tr>
        <tr>
            <td>
                RUT Empresa
            </td>
            <td>
                <input type="text" id="RUTEmp" name="RUTEmp" />
            </td>
            <td>
                <div id="RUTEmpVal"></div>
            </td>
        </tr>
        <tr>
            <td>
                Teléfono Contacto
            </td>
            <td>
                <input type="text" id="Telefono" name="Telefono" />
            </td>
            <td>
                <div id="TelefonoVal"></div>
            </td>
        </tr>
        <tr>
            <td>
                Correo Electrónico
            </td>
            <td>
                <input type="text" id="Correo" name="Correo" />
            </td>
            <td>
                <div id="CorreoVal"></div>
            </td>
        </tr>
    </table>
    </fieldset>
    <fieldset>
    <legend>Datos del Vehículo</legend>
    <table align="center">
        <tr>
            <td>
                Patente
            </td>
            <td>
                <input type="text" id="Patente" name="Patente" />
            </td>
            <td>
                <div id="PatenteVal"></div>
            </td>
        </tr>
        <tr>
            <td>
                Tipo Vehículo
            </td>
            <td>
                <input type="text" id="TipoVehiculo" name="TipoVehiculo" />
            </td>
            <td>
                <div id="TipoVehiculoVal"></div>
            </td>
        </tr>
        <tr>
            <td>
                Marca
            </td>
            <td>
                <input type="text" id="Marca" name="Marca" />
            </td>
            <td>
                <div id="MarcaVal"></div>
            </td>
        </tr>
        <tr>
            <td>
                Modelo
            </td>
            <td>
                <input type="text" id="Modelo" name="Modelo" />
            </td>
            <td>
                <div id="ModeloVal"></div>
            </td>
        </tr>
    </table>
    </fieldset>
    <fieldset>
    <legend>Restricciones de la Tarjeta</legend>
    <table align="center">
        <tr>
            <td>
                Volumen Carga Diaria
            </td>
            <td>
                <input type="text" id="VolumenCargaDiaria" name="VolumenCargaDiaria" />
            </td>
            <td>
                <div id="VolumenCargaDiariaVal"></div>
            </td>
        </tr>
        <tr>
            <td>
                Volumen Carga Mensual
            </td>
            <td>
                <input type="text" id="VolumenCargaMensual" name="VolumenCargaMensual" />
            </td>
            <td>
                <div id="VolumenCargaMensualVal"></div>
            </td>
        </tr>
        <tr>
            <td>
                Cantidad de Cargas Diarias
            </td>
            <td>
                <input type="text" id="CantidaddeCargasDiarias" name="CantidaddeCargasDiarias" />
            </td>
            <td>
                <div id="CantidaddeCargasDiariasVal"></div>
            </td>
        </tr>
        <tr>
            <td>
                Lubricantes
            </td>
            <td>
                <input type="radio" id="LubOP1" name="Lubricantes" checked="checked" />¿Si?
                <br />
                <input type="radio" id="LubOP2" name="Lubricantes" />¿No?
            </td>
        </tr>
    </table>
    </fieldset>
    <div>
        <fieldset>
            <legend>Subir Documento(s) Asociado(s)</legend>
            <br />
            <input id="Archivo" name="Archivo" type="file" size="100" />
            <br />
        </fieldset>
    </div>
    <input type="hidden" id="ButtonClick" name="ButtonClick" />
    <input type="hidden" id="Delimitador" name="Delimitador" value="<##>" />
    <center>
        <input type="button" value="Solicitar" onclick="Solicitar()" />
        <input type="button" value="Volver" onclick="Volver()" />
    </center>
}